<script setup>

import { computed,watch,ref,reactive} from 'vue';
const obj = ref({name:"张三",age:18,sex:"男"})

const btnName = (name="李四") => {
  obj.value.name = name
}
const btnAge = () => {
  obj.value.age = 20
}
const btnSex = () => {
  obj.value.sex = "女"
}

watch(obj, (newVal, oldVal) => {
  console.log('总监听器',newVal, oldVal)
},{deep:true})

watch(()=> obj.value.name, (newVal, oldVal) => {
  console.log('name监听器',newVal, oldVal)
})

watch(()=> [obj.value.sex, obj.value.age], (newVal, oldVal) => {
  console.log('sex/age监听器',newVal, oldVal)
})

</script>

<template>
  <div>姓名：{{ obj.name }}</div>
  <div>年龄：{{ obj.age }}</div>
  <div>性别：{{ obj.sex }}</div>
  <button @click="btnName">点击姓名 </button>
  <button @click="btnAge">点击年龄 </button>
  <button @click="btnSex">点击性别 </button>
</template>

<style scoped>

</style>
